<!-- components/FormInput.vue -->
<template>
  <view class="form-card">
    <text class="form-label" :class="{ required }">{{ label }}</text>
    <input 
      v-model="inputValue"
      :placeholder="placeholder"
      placeholder-class="placeholder-style"
      class="form-input"
      :type="type"
      :maxlength="maxlength"
      @input="handleInput"
    />
    <view class="divider" v-if="showDivider"></view>
  </view>
</template>

<script>
export default {
  props: {
    label: {
      type: String,
      required: true
    },
    modelValue: {
      type: [String, Number],
      default: ''
    },
    placeholder: {
      type: String,
      default: '请输入'
    },
    type: {
      type: String,
      default: 'text'
    },
    required: {
      type: Boolean,
      default: false
    },
    showDivider: {
      type: Boolean,
      default: true
    },
    maxlength: {
      type: [Number, String],
      default: 140
    }
  },
  emits: ['update:modelValue'],
  computed: {
    inputValue: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  },
  methods: {
    handleInput(e) {
      this.$emit('update:modelValue', e.detail.value)
    }
  }
}
</script>

<style scoped>
.form-card {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
}

.form-card .form-label {
  font-size: 32rpx;
  color: #333;
  margin-bottom: 30rpx;
  display: block;
}

.form-card .form-label.required::before {
  content: '*';
  color: #f44336;
  margin-right: 8rpx;
}

.form-card .form-input {
  font-size: 30rpx;
  height: 80rpx;
  line-height: 80rpx;
}

.form-card .divider {
  height: 1rpx;
  background: #eee;
  margin: 20rpx -30rpx 0;
}
</style>